<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>签到系统</title>
    <script th:src="@{/static/login/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/login/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/login/css/adminLogin.css}">
</head>
<body>
<div class="wrap">
    <img th:src="@{/static/login/images/background.jpg}" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead" style="width: auto">
                <h1 style="margin-left: 70px">签到</h1>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv aaaa"  >
                <input id="loginBtn"  style="width: 25%;display: inline-block "  type="button"  class="submit layui-btn layui-btn-primary" value="签到"/>
                <input id="offBtn" type="button" style="width: 25%;display: inline-block "  class="submit layui-btn layui-btn-primary" value="签退"/>
                <input id="login" type="button" style="display: inline-block "  class="submit layui-btn layui-btn-primary" value="后台登录"/>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/static/login/layui.all.js}" type="text/javascript"></script>
<script>
    //设置日期格式
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    //计算时间差（相差分钟）
    function timeDifference(startTime,endTime){
        var start1=startTime.split(":");
        var startAll=parseInt(start1[0]*60)+parseInt(start1[1]);

        var end1=endTime.split(":");
        var endAll=parseInt(end1[0]*60)+parseInt(end1[1]);

        console.log("时间差==="+(endAll-startAll));
        return (endAll-startAll);

    }


    layui.use(['layer'],function () {
        var layer = layui.layer;
    })
    var das = new Date();
    //设置签到日期
    var nowdate = das.Format("yyyy-MM-dd")
    // var nowdate = d.toLocaleString('cn',{hour12:false})

    //获取早上签到时间
    var date=das.Format("HH:mm:ss");
    var ds ="09:00:00";
    //设置签退时间 如果下与则显示早
    var ds1="17:30:00"

    //签到方法
    $("#loginBtn").click(function () {

        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空",{icon: 5});
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            // layer.msg("删除失败", {icon: 5});
            layer.alert("密码不能为空",{icon: 5});
            return false;
        }
        if (date>ds){
            var ssd="迟到"+timeDifference(ds,date)+"分钟";
            var d={"username":loginUsername,"password":loginPassword,"ontime":date,"onmark":ssd,"nowdate":nowdate};
        }else{
            var qwe="早来了"+timeDifference(date,ds)+"分钟";
            var d={"username":loginUsername,"password":loginPassword,"on0000time":date,"onmark":qwe,"nowdate":nowdate};
        }
        $.ajax({
            url:'/sum/qiandao',
            data:JSON.stringify(d),
            type:"post",
            dataType:'json',
            contentType: "application/json;charset=utf-8",
            success:function (data){
                if (data.msg!=1){
                        layer.alert(data.msg,{icon:5});
                    // alert(data.msg);
                    // layer.alert(data.msg+"请重新登录",{icon: 5});
                    // window.self.location="/"
                    // location.reload()
                }else{
                    // layer.alert("登录成功",{icon: 6});
                    // window.self.location="/home"
                    if (date>ds){
                            layer.alert("对不起，您已迟到"+timeDifference(ds,date)+"分钟",{icon:5});
                    }else{
                            layer.alert("签到成功",{icon:6});
                     }
                }
            }

        });

    })
    //签退
    $("#offBtn").click(function () {
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空",{icon: 5});
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            // layer.msg("删除失败", {icon: 5});
            layer.alert("密码不能为空",{icon: 5});
            return false;
        }
        if (date<ds1){
            var ssd="早退"+timeDifference(date,ds1)+"分钟";
            var d={"username":loginUsername,"password":loginPassword,"offtime":date,"offmark":ssd,"nowdate":nowdate};
        }else{
            var sda="加班了"+timeDifference(ds1,date)+"分钟";
            var d={"username":loginUsername,"password":loginPassword,"offtime":date,"offmark": sda,"nowdate":nowdate};
        }
        $.ajax({
            url:'/sum/qiantui',
            data:JSON.stringify(d),
            type:"post",
            dataType:'json',
            contentType: "application/json;charset=utf-8",
            success:function (data){
                if (data.msg!=1){
                    layer.alert(data.msg,{icon:5});
                    // layer.alert(data.msg+"请重新登录",{icon: 5});
                    // window.self.location="/"
                    // location.reload()
                }else{
                    // layer.alert("登录成功",{icon: 6});
                    // window.self.location="/home"
                    if (data<ds1){
                        layer.alert("您今天早退了"+timeDifference(data,ds1)+"分钟",{icon:6});
                    }else{
                        layer.alert("签退成功",{icon:6});
                    }

                }
            }

        });

    })
    //登录
    $("#login").click(function () {
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空",{icon: 5});
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            // layer.msg("删除失败", {icon: 5});
            layer.alert("密码不能为空",{icon: 5});
            return false;
        }
        var d={"username":loginUsername,"password":loginPassword};
        $.ajax({
            url:'/wUserss/login',
            data:JSON.stringify(d),
            type:"post",
            dataType:'json',
            contentType: "application/json;charset=utf-8",
            success:function (data){
                if (data.msg==1){
                    layer.alert("登录成功",{icon:6});

                    // layer.alert(data.msg+"请重新登录",{icon: 5});
                    window.location.href="/home"
                    // location.reload()
                }else{
                    layer.alert(data.msg,{icon:5});
                }
            }

        });

    })

</script>
</body>
</html>
